<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="css/Lobibox.min.css" rel="stylesheet">
		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="css/demo.css" rel="stylesheet" type="text/css" />
		<link href="css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="css/optstyle.css" rel="stylesheet" type="text/css" />
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="js/Lobibox.js"></script>
		<script type="text/javascript" src="js/shopcart.js"></script>

		<script src="js/Data.js"></script>
	</head>

	<body>

	<!--顶部导航条 -->
	<div class="am-container header">
		<ul class="message-l">
			<div id="login" class="topMessage">
				<div  v-if="ok"  class="menu-hd">
					<a href="#" target="_top" class="h">{{login}}</a>
					<a href="#" target="_top">！你好</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a >退出</a>
				</div>
				<div  v-else  class="menu-hd">
					<a href="#" target="_top" class="h">请登录！</a>
					<a href="#" target="_top">免费注册</a>
				</div>
			</div>
		</ul>
		<ul class="message-r">
			<div class="topMessage home">
				<div class="menu-hd"><a href="http://localhost:8080//taobao_html/%E9%A6%96%E9%A1%B5.html" target="_top" class="h">商城首页</a></div>
			</div>
			<div class="topMessage my-shangcheng">
				<div class="menu-hd MyShangcheng"><a href="http://localhost:8080//taobao_html/information.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
			</div>
			<div class="topMessage mini-cart">
				<div class="menu-hd"><a id="mc-menu-hd" href="http://localhost:8080//taobao_html/shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
			</div>
			<div class="topMessage favorite">
				<div class="menu-hd"><a href="http://localhost:8080//taobao_html/collection.html" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
		</ul>
	</div>

	<!--悬浮搜索框-->

	<div class="nav white">
		<div class="logo"><img src="images/logo.png" /></div>
		<div class="logoBig">
			<li><img src="images/logobig.png" /></li>
		</div>

		<div class="search-bar pr">
			<a name="index_none_header_sysc" href="#"></a>
			<form>
				<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
				<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
			</form>
		</div>
	</div>

	<div class="clear"></div>

	<!--购物车 -->
	<div id="div_shop" class="concent">
		<div id="cartTable">
			<div class="cart-table-th">
				<div class="wp">
					<div class="th th-chk">
						<div id="J_SelectAll1" class="select-all J_SelectAll">

						</div>
					</div>
					<div class="th th-item">
						<div class="td-inner">商品信息</div>
					</div>
					<div class="th th-price">
						<div class="td-inner">单价</div>
					</div>
					<div class="th th-amount">
						<div class="td-inner">数量</div>
					</div>
					<div class="th th-sum">
						<div class="td-inner">金额</div>
					</div>
					<div class="th th-op">
						<div class="td-inner">操作</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>

			<tr class="item-list">
				<div class="bundle  bundle-last ">
					<div class="bundle-hd">
						<div class="bd-promos">
							<div class="bd-has-promo"><span class="bd-has-promo-content"></span>&nbsp;&nbsp;</div>
							<div class="act-promo">
								<a href="#" target="_blank"><span class="gt"></span></a>
							</div>
							<span class="list-change theme-login">编辑</span>
						</div>
					</div>
					<div class="clear">


					</div>

					<div >


						<div v-for="(commodity,index) in commodityShop" class="bundle-main">


							<ul class="item-content clearfix">
								<li class="td td-chk">
									<div class="cart-checkbox ">
										<input onclick="check(this.value)" :value="commodity.id"   type="checkbox">
										<label></label>
									</div>
								</li>
								<li class="td td-item">
									<div class="item-pic">
										<a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆" class="J_MakePoint" data-point="tbcart.8.12">
											<img :src="commodity.commodityImgUrl" style="width: 80px;height: 80px" class="itempic J_ItemImg"></a>

									</div>
									<div class="item-info">
										<div class="item-basic-info">
											<a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" class="item-title J_MakePoint" data-point="tbcart.8.11">{{commodity.commodityName}}</a>
										</div>
									</div>
								</li>
								<li class="td td-info">
									<div class="item-props item-props-can">

									</div>
								</li>
								<li class="td td-price">
									<div class="item-price price-promo-promo">
										<div class="price-content">

											<div class="price-line">
												<em class="J_Price price-now" tabindex="0">{{commodity.commodityPrice}}</em>
											</div>
										</div>
									</div>
								</li>
								<li class="td td-amount">
									<div class="amount-wrapper ">
										<div class="item-amount ">
											<div class="sl">

												<input  :name="commodity.id" :value="commodity.cartNum" onchange="shopCartNum(this.name,this.value)"   style="width:30px;" />

											</div>
										</div>
									</div>
								</li>
								<li class="td td-sum">
									<div class="td-inner">
										<em tabindex="0" class="J_ItemSum number">{{commodity.commodityTotalPrice}}</em>
									</div>
								</li>
								<li class="td td-op">
									<div class="td-inner">
										<a title="移入收藏夹" class="btn-fav" href="#">
											移入收藏夹</a>
										<a href="javascript:;" data-point-url="#" :name="commodity.id" onclick="deleteShop(this.name)" class="delete">
											删除</a>
									</div>
								</li>
							</ul>


						</div>
					</div>







				</div>
			</tr>
		</div>
		<div class="clear"></div>

		<div class="float-bar-wrapper">
			<div id="J_SelectAll2" class="select-all J_SelectAll">
				<div class="cart-checkbox">
					<input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
					<label for="J_SelectAllCbx2"></label>
				</div>
				<span>全选</span>
			</div>
			<div class="operations">
				<a href="#" hidefocus="true" v-on:click="remove(goods)" class="deleteAll">删除</a>
				<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
			</div>
			<div class="float-bar-right">
				<div class="amount-sum">
					<span class="txt">已选商品</span>
					<em id="J_SelectedItemsCount">{{ count }}</em><span class="txt">件</span>
					<div class="arrow-box">
						<span class="selected-items-arrow"></span>
						<span class="arrow"></span>
					</div>
				</div>
				<div class="price-sum">
					<span class="txt">合计:</span>
					<strong class="price">¥<em id="J_Total">{{total}}</em></strong>
				</div>
				<div class="btn-area">
					<a id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
						<span onclick="settle()">结&nbsp;算</span></a>
				</div>
			</div>





		</div>

		<div class="footer">
			<div class="footer-hd">
				<p>
					<a href="#">恒望科技</a>
					<b>|</b>
					<a href="http://localhost:8080/views/view-api/home2.html">商城首页</a>
					<b>|</b>
					<a href="#">支付宝</a>
					<b>|</b>
					<a href="#">物流</a>
				</p>
			</div>
			<div class="footer-bd">
				<p>
					<a href="#">关于恒望</a>
					<a href="#">合作伙伴</a>
					<a href="#">联系我们</a>
					<a href="#">网站地图</a>
					<em>© 2015-2025 Hengwang.com 版权所有</em>
				</p>
			</div>
		</div>



	</div>













	<!--引导 -->
	<div class="navCir">
		<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
		<li class="active"><a href="myShopCart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
		<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
	</div>

	<script type="text/javascript">

		function shopCartNum(type,value){

			var fromLocalStorage = getFromLocalStorage("seller");
			var id = fromLocalStorage.id;

			let url = "addCarts?commodityId=" +type+"&userId="+id+"&cartNum="+value;
			get(url,function (data) {
				v.commodityShop=data;
			})


		}
		function deleteShop(t){

			alert("确定要删除吗?");
			var fromLocalStorage = getFromLocalStorage("seller");
			var id = fromLocalStorage.id;

			let url = "delete?commodityId=" +t;
			get(url,function (data) {
				v.commodityShop=data;
			})

		}

		var array = new Array();


		check=function (id) {

			var newVar = $("[value="+id+"]").is(":checked");

			if (newVar){
				array.push(id);
			}

		}
		function settle(){
			location.href="http://localhost:8080//taobao_html/payShop.html?id="+array;
		}

		let v = new Vue({
			el: '#div_shop',
			data: {
				commodityShop:[]
			},
			computed:{
				count : function(){
					var cartNum = 0;
					for(var i in this.commodityShop){
						cartNum += parseInt(this.commodityShop[i].cartNum);
					}
					return cartNum;
				},
				total : function(){
					var total = 0;
					for(var i in this.commodityShop){
						total += this.commodityShop[i].commodityPrice * this.commodityShop[i].cartNum;
					}
					return total;
				}
			},
			methods: {

				refreshSellerList: function () {

					let  fromLocalStorage = getFromLocalStorage("seller");
					let id = fromLocalStorage.id;
					//发起http请求后台获取商家列表数据
					var url="selectShop?userId="+id;
					let thisObj = this;
					get(url, function (data) {
						thisObj.commodityShop = data;
					})

				}
			},
			mounted: function () {
				//页面加载完成，并且vue对象加载完成之后调用
				this.refreshSellerList();
			}
		})

		var from = getFromLocalStorage("seller");
		if (from==null){
			alert("未登录哦！");
			location.href="登录.html";
		}
		if (from==null){
			var vm = new Vue({
				el: "#login",
				data: {

					ok:false
				}
			});

		}else {
			var vm = new Vue({
				el: "#login",
				data: {
					login: from.userName,
					ok:true
				}
			});
		}

	</script>
	</body>

</html>

<script>
	$(function () {
		//登录才能进入
		judgeLogin();
		//登录之后显示 用户名
		OnDisplay();
	});














	//为页面搜索功能实现功能
	//获取搜索按钮
	let topsearch = document.getElementById("ai-topsearch");
	//搜索按钮绑定点击事件
	topsearch.onclick = function () {
		let searchInput = document.getElementById("searchInput");
		let value = searchInput.value;
		//跳转到详情页,把id带过去
		let openUrl = "http://localhost:8080/views/view-api/search.html";
		window.open(openUrl+"?"+value)

	}

</script>